<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item
      v-for="(breadcrumb, index) in breadcrumbs"
      :key="index"
    >
      {{ breadcrumb.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
const { route } =  defineProps({
  route: {
    type: Object,
    default: () => ({})
  }
})

const breadcrumbs = ref([])

const updateBreadcrumbs = () => {
  if(route.path === '/dashboard') {
    return breadcrumbs.value = []
  }
  const matched = route.matched.filter(item => item.meta && item.meta.title)
  breadcrumbs.value = matched.map(item => ({
    title: item.meta.title,
    to: { path: item.path }
  }))
}

updateBreadcrumbs()

watch(() => route, () => {
  updateBreadcrumbs()
}, { deep: true })

</script>

<style lang="scss" scoped>

</style>
